<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content">
        <div class="swipe-div">
            <mt-swipe :auto="0">
                <mt-swipe-item class="slide1" v-for="(img, index) in imgList" :key="index"><a href="javascript: void(0)"><img :src="img" /></a></mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="audit-details">
            <ul>
                <li>
                    <p class="audit-details-title">样衣编号:</p>
                    <p class="audit-details-conts">{{ data.sampleId }}</p>
                </li>
                <li>
                    <p class="audit-details-title">大类:</p>
                    <p class="audit-details-conts">{{ data.dlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">货号:</p>
                    <p class="audit-details-conts">{{ data.pcode }}</p>
                </li>
                <li>
                    <p class="audit-details-title">小类:</p>
                    <p class="audit-details-conts">{{ data.xlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">波段号:</p>
                    <p class="audit-details-conts">{{ data.bandid }}</p>
                </li>
                <li>
                    <p class="audit-details-title">合作方式:</p>
                    <p class="audit-details-conts">{{ data.jyfs }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商编码:</p>
                    <p class="audit-details-conts">{{ data.supplierid }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商:</p>
                    <p class="audit-details-conts">{{ data.vendername }}</p>
                </li>
            </ul>
        </div>
        <div class="audit-regula sDemand-details sDemand-details-upload" style="margin-bottom: 0;">
            <!-- <div class="audit-regula-title">
                <h1>状态选择</h1>
                <a id="primary-details-title-but" class="primary-details-title-but">点击生成详情</a>
            </div> -->
            <div class="sDemand-details-cont sDemand-details-upload-cont">
                <ul class="mui-table-view sDemand-details-upload-contul primaryList-details-contul">
                    <!-- <li>
                        <p class="sDemand-details-num">供应商货号:</p>
                        <input class="sDemand-details-input" type="number" placeholder="请输入供货商货号">
                    </li> -->
                    <!-- <li>
                        <p class="sDemand-details-num">主推款:</p>
                        <div class="mui-input-row mui-radio sDemand-details-radio">
                            <input name="radioTui" type="radio" checked>
                            <label>是</label>
                        </div>
                        <div class="mui-input-row mui-radio  sDemand-details-radio">
                            <input name="radioTui" type="radio">
                            <label>否</label>
                        </div>
                    </li> -->
                    <!-- <li>
                        <p class="sDemand-details-num">合作方式:</p>
                        <div class="mui-input-row mui-checkbox sDemand-details-radio">
                            <label>试用</label>
                            <input name="Checkbox" type="checkbox" style="right: 3.2rem;">
                        </div>
                    </li> -->
                    <li  class="sDemand-details-select"  @click="toShow(1)">
                        <a class="mui-icon iconfont icon-arrowleft"></a>
                        <p class="sDemand-details-num">颜色组:</p>
                        <span class="select-span">{{chooseColorGroup.text}}</span>
                    </li>
                    <li  class="sDemand-details-select">
                        <a class="mui-icon iconfont icon-arrowleft"></a>
                        <p class="sDemand-details-num color">颜色:</p>
                        <div class="check-box-div">
                            <div class="mui-checkbox box" v-for="(item, index) in chooseColorGroup.children" :key="index">
                                <input name="Checkbox" type="checkbox"  @change="doChooseColor()" v-model="chooseColor" :value="item.value">
                                <label>{{ item.label }}</label>
                            </div>
                        </div>
                    </li>
                    <li  class="sDemand-details-select">
                        <a class="mui-icon iconfont icon-arrowleft"></a>
                        <p class="sDemand-details-num">主推颜色:</p>
                        <!-- <span  class="select-span">{{ mainColor.text }}</span> -->
                        <div class="check-box-div">
                            <div class="mui-checkbox box" v-for="(item, index) in chooseColorUsed" :key="index">
                                <input name="Checkbox" type="checkbox" v-model="mainColor" :value="item.value" @change="changeMainColor()"> 
                                <label>{{ item.label }}</label>
                            </div>
                        </div>
                    </li>
                    <li  class="sDemand-details-select" @click="toShow(3)">
                        <a class="mui-icon iconfont icon-arrowleft"></a>
                        <p class="sDemand-details-num">尺寸组:</p>
                        <span class="select-span">{{chooseSizeGroup.text}}</span>
                    </li>
                    <li  class="sDemand-details-select">
                        <a class="mui-icon iconfont icon-arrowleft"></a>
                        <p class="sDemand-details-num">尺寸:</p>
                        <div class="check-box-div">
                            <div class="mui-checkbox box" v-for="(item, index) in chooseSizeGroup.children" :key="index">
                                <input name="Checkbox" type="checkbox"  @change="doChooseSize()" v-model="chooseSize" :value="item.value">
                                <label>{{ item.label }}</label>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p class="sDemand-details-num">报价:</p>
                        <input v-model="cost" id="primaryList-details-count" class="sDemand-details-input" type="number" placeholder="请输入报价">
                    </li>
                </ul>
            </div>
        </div>	
        <!--详情列表-->
        <div class="audit-regula" style="padding-bottom: 4rem;">
            <div class="audit-regula-title">
                <h1>邮寄数量<span @click="addNum" class="iconfont icon-jiahao"></span></h1>
            </div>
            <div class="audit-regula-cont oneScore-cont primaryList-details-contList">
                <ul>
                    <li v-for="(det, index) in detailList" :key="det.Id">
                        <ul class="num-li">
                            <li @click="toShow(4,index)">
                                <!-- <p class="primaryList-details-contList-num">颜色:</p> -->
                                {{ det.Color==''?'请选择颜色':det.Color }}
                                <!-- <p class="primaryList-details-contList-color">{{ det.Color }}</p> -->
                            </li>
                            <li @click="toShow(5,index)">
                                 {{ det.Size==''?'请选择尺寸':det.Size }}
                                <!-- <p class="primaryList-details-contList-num">尺寸:</p> -->
                                <!-- <p class="primaryList-details-contList-size">{{ det.Size }}</p> -->
                            </li>
                            <li>
                                <!-- <p class="primaryList-details-contList-num">数量:</p> -->
                                <input  type="number" placeholder="输入发货数量" v-model="det.sendqty">
                                <!-- <p class="primaryList-details-contList-count">{{ det.sendqty }}</p> -->
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="sDemand-details-upload-sure sDemand-details-sure primaryList-details-sure">
            <button id="primaryList-details-sure" type="button" class="mui-btn mui-btn-blue" @click="viewDelivery">提交</button>
        </div>
    </div>
    <vue-pickers
      :show="showPicker"
      :columns="columns"
      :defaultData="defaultData"
      :selectData="pickData"
      :link="link"
      @cancel="close"
      @confirm="confirmFn"></vue-pickers>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import { Swipe, SwipeItem } from 'mint-ui'
import vuePickers from 'vue-pickers'
import API from '@/service/api'
export default {
    components: { commonHeader, Swipe, SwipeItem, vuePickers },
    data() {
        return {
            title: '样衣初选单详情',
            chooseNow: 1,
            submitData: {},
            cost: '',//价格
            chooseColorGroup: {text: '颜色', value: '-1'},//选中的颜色组
            chooseColor: [],
            chooseColorUsed: [],
            mainColor: [],//选中的主打色
            chooseSizeGroup: {text: '颜色', value: '-1'},//选中的颜色组
            chooseSize: [],
            chooseSizeUsed: [],
            cols:0,//是哪一行的点击了选择框
            data: {},
            imgList: [],
            detailList: [],
            colorList: [], 
            sizeList: [],
            showPicker: false,
            columns: 1,
            defaultData: [],
            pickData: {
                // 第一列的数据结构
                data1: []
            },
            currencyColors: [],
            currencySizes: [],
            key:1,
        }
    },
    computed: {
        ...mapState( [ 'sample_id', 'sample_no' ] ) 
    },      
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING' ] ),
        //动态添加行
        addNum() {
            this.detailList = [...this.detailList, {Id: this.getKey(),Color: '',Size: '',sendqty: ''}]
        },
        changeMainColor() {
            if(this.mainColor.length>2){
                this.mainColor = this.mainColor.slice(0,2)
                this.$error("最多选择两个！")
            }
        },
        doChooseColor() {//选中颜色之后
            let choose = this.chooseColorGroup.children.filter(row=>{
                let ischoose = this.chooseColor.filter(item=>{
                    return item == row.value
                })
                return ischoose.length>0
            })
            this.chooseColorUsed = choose
            this.chooseColorUsed.forEach(co=>{
                co.text = co.label
            })
        },
          //选中尺码之后
        doChooseSize() {
            let choose = this.chooseSizeGroup.children.filter(row=>{
                let ischoose = this.chooseSize.filter(item=>{
                    return item == row.value
                })
                return ischoose.length>0
            })
            this.chooseSizeUsed = choose
            this.chooseSizeUsed.forEach(co=>{
                co.text = co.label
            })
        },
        getKey() {
            this.key++;
            return this.key
        },
        async initialization() {
            //获取基本信息
            this.data = await API.currency.getSampleDetail({ ID: this.sample_no })
            //获取样衣图片列表
            let imgs = await API.currency.getSampleImgs({ sampleId: this.sample_id })
            for(let i = 1; i<6; i++) {
                const img = imgs[`limg${i}`]
                if(img)
                    this.imgList.push(img)
            }
            // //获取详情
            let detail = await API.primary.getPrimaryDetail( {sampleId: this.sample_id })
            if(detail.cost)this.cost = detail.cost
            if(detail.Detial.length>0){
                this.detailList = detail.Detial
            }
            API.currency.getColors().then(res=> {
                res.forEach(row => {
                    this.currencyColors = [{text: row.label, value: row.value, children: row.children}, ...this.currencyColors]
                })
                if(detail.Color.length>0) {
                    let color = detail.Color[0]
                    let chooseColor = {}
                    this.currencyColors.forEach(row=>{
                        let isexit = row.children.filter(ch=>{
                            return ch.value == color.colourid
                        })
                        if(isexit.length>0){
                            chooseColor = row
                        }
                    })
                    this.chooseColorGroup = chooseColor
                    detail.Color.forEach(row=>{
                        this.chooseColorUsed = [...this.chooseColorUsed, {text: row.colourname, value: row.colourid}]
                        this.chooseColor = [row.colourid, ...this.chooseColor]
                        if(row.isrecom == 1) {
                            // this.mainColor.text = row.colourname
                            // this.mainColor.value = row.colourid
                            this.mainColor = [...this.mainColor, row.colourid]
                        }
                    })
                }else {
                    this.chooseColorGroup = this.currencyColors[0]
                }
            })
            API.currency.getSizes().then(res=> {
                res.forEach(row => {
                    this.currencySizes = [{text: row.label, value: row.value, children: row.children}, ...this.currencySizes]
                })
                if(detail.Color.length>0) {
                    let size = detail.Size[0]
                    let chooseSize = {}
                    this.currencySizes.forEach(row=>{
                        let isexit = row.children.filter(ch=>{
                            return ch.value == size.sizeid
                        })
                        if(isexit.length>0){
                            chooseSize = row
                        }
                    })
                    this.chooseSizeGroup = chooseSize
                    detail.Size.forEach(row=>{
                        this.chooseSizeUsed = [{text: row.sizename, value: row.sizeid}, ...this.chooseSizeUsed]
                        this.chooseSize = [row.sizeid, ...this.chooseSize]
                    })
                }else {
                    this.chooseSizeGroup = this.currencySizes[0]
                }
            })
            
            this.UPDATE_SHOW_LOADING(false)
        },
        close() {
            this.showPicker = false
        },
         //确认选中
        confirmFn(val) {
            this.showPicker = false
            if(this.chooseNow==1){
                this.chooseColorGroup = val.select1
            }else if(this.chooseNow == 2 ){
                this.mainColor = val.select1
            }else if(this.chooseNow == 3 ){
                this.chooseSizeGroup = val.select1
            }else if(this.chooseNow == 4 ){
                this.detailList[this.cols].ColorId = val.select1.value
                this.detailList[this.cols].Color = val.select1.text
            }else if(this.chooseNow == 5 ){
                this.detailList[this.cols].SizeId = val.select1.value
                this.detailList[this.cols].Size = val.select1.text
            }
        },
        toShow(index, cols) {
            this.showPicker = true
            this.chooseNow = index
            this.cols = cols
            if(index == 1){
                this.defaultData = [this.chooseColorGroup]
                this.pickData.data1 = this.currencyColors
            }else if(index == 2){
                this.defaultData = [this.chooseColorUsed[0]]
                this.pickData.data1 = this.chooseColorUsed
            }else if(index == 3){
                this.defaultData = [this.chooseSizeGroup]
                this.pickData.data1 = this.currencySizes
            }else if(index == 4){
                this.defaultData = [this.chooseColorUsed[0]]
                this.pickData.data1 = this.chooseColorUsed
            }else if(index == 5){
                this.defaultData = [this.chooseSizeUsed[0]]
                this.pickData.data1 = this.chooseSizeUsed
            }
        },
        //检查
        check() {
            let flag = true
            if(this.chooseColor.length<1){
                this.$error('请选择颜色！')
				flag =  false
				return flag
            }
            if(this.mainColor.value=='-1'){
                this.$error('请选择主荐颜色！')
				flag =  false
				return flag
            }
            if(this.chooseSize.length<1){
                this.$error('请选择尺码！')
				flag =  false
				return flag
            }
            if(!this.cost){
                this.$error('请输入发货数量！')
				flag =  false
				return flag
            }
            return flag
        },
        viewDelivery() {
            if(this.check()){
                //保存，先检查
                this.save()
            }
        },
        save() {
            this.UPDATE_SHOW_LOADING(true)
            let data = { ids: {Color: [], Size: [], Detial: [], cost: this.cost}, sampleId: this.sample_id}
            this.chooseColorUsed.forEach(row=>{
                let color = new Object()
                color.colourid = row.value
                color.colourname = row.label
                color.note = ''
                color.isrecom = 0
                if(this.mainColor.contains(row.value)) color.isrecom = 1
                data.ids.Color = [...data.ids.Color, color]
            })
            this.chooseSizeUsed.forEach(row=>{
                let size = new Object()
                size.sizeid = row.value
                size.sizename = row.text
                size.note = ''
                data.ids.Size = [...data.ids.Size, size]
            })
            this.detailList.forEach(row=> {
                let detail = new Object()
                detail.ColorId = row.ColorId
                detail.SizeId = row.SizeId
                detail.sendqty = row.sendqty
                data.ids.Detial = [...data.ids.Detial, detail]
            })
            API.primary.submitDetail(data).then(res=>{
                if(res.code == 1){
                    this.UPDATE_SHOW_LOADING(false)
                    this.$success()
                    setTimeout(()=>{
                        this.$router.push( { name: 'primaryDelivery' } )
                    },1000)
                }
            })
        }
    },
    created() {
       this.initialization()
    } 
}
</script>
<style scoped lang="less">
.select-span{
    font-size: 14px;
}
.color{
    width: 45px!important;
}
.check-box-div{
    width: calc(100% - 50px);
    float: right;
    .box {
        width: 32%;
        float: left;
        margin-bottom: 10px;
        input{
            top: 0px!important;
        }
        label{
            padding-right: 30px;
            font-size: 14px;
        }
    }
}
.icon-jiahao{
    margin-left: 10px;
    color: #2772ff;
    margin-top: 5px;
}
.num-li{
    margin-bottom: 5px;
    li {
        width: 30%!important;
        font-size: 14px;
        line-height: 30px!important;
        border-radius: 10px;
        height:  30px;
        text-align: center;
        color: #777;
        input{
            width: 100%;
            height:  30px;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, .2);
            padding: 0;
            text-align: center;
        }
    }
    li:nth-child(1),li:nth-child(2){
        margin-right: 15px;
        border: 1px solid rgba(0, 0, 0, .2);
    }
}
</style>